<template>
  <div>

    <div class="gongJv">
      <el-form :inline="true" :model="ruleSelectForm">
        <el-form-item>
          <el-input v-model="ruleSelectForm.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="ruleSelectForm.creator" placeholder="请输入操作人员"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="ruleSelectForm.state" placeholder="公告状态">
            <el-option label="开启" :value="1"></el-option>
            <el-option label="关闭" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="keywordQuery" icon=" el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-perm="'announcement/add'" type="success" plain icon="el-icon-plus" @click="addNotice">公告新增</el-button>
        </el-form-item>
      </el-form>



      <!--列表-->
      <el-table :data="noticeMags" highlight-current-row v-loading="listLoading"
                style="width: 100%;" max-height="550px">
        <el-table-column type="selection" width="55">
        </el-table-column>
<!--        <el-table-column prop="id" label="序号" width="150" sortable :header-align="'center'" :align="'center'">-->
<!--        </el-table-column>-->
        <el-table-column prop="title" label="公告标题" width="150" :header-align="'center'" :align="'center'">
        </el-table-column>
        <el-table-column prop="employee.adminName" label="创建者" width="150" :header-align="'center'" :align="'center'">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :align="'center'" width="200"></el-table-column>
        <el-table-column prop="state" label="状态" width="100" :header-align="'center'" :align="'center'">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state === 1 ? '' : 'danger'">
              {{ scope.row.state === 1 ? '开启' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="置顶状态" width="100" :header-align="'center'" :align="'center'">
          <template slot-scope="scope">
            <el-tag :type="scope.row.top === 1 ? '' : 'info'"
                    :effect="scope.row.top === 1 ? 'dark' : 'light'" >
              {{ scope.row.top === 1 ? '已置顶' : '未置顶' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" :header-align="'center'" :align="'center'" width="300">
          <template scope="scope">
            <el-button  size="small"type="text" v-perm="'announcement/show'"
                        @click="showNotice(scope.$index, scope.row)"><i class="el-icon-tickets"/>详情
            </el-button>
            <el-button  size="small" type="text" v-perm="'announcement/edit'"
                       @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit-outline"/>修改
            </el-button>
            <el-button v-perm="'announcement/top'"
                v-if="scope.row.state === 1 && scope.row.top == 0"
                type="text"
                size="small"
                @click="handleTopChange(scope.$index, scope.row)"
            ><i class="el-icon-upload2"/>
              公告置顶
            </el-button>
            <el-button v-perm="'announcement/down'"
                v-if="scope.row.state === 1 && scope.row.top == 1"
                type="text"
                size="small"
                @click="handleUnTop(scope.$index, scope.row)"
            ><i class="el-icon-download"/>
              取消置顶
            </el-button>
            <el-button  v-perm="'announcement/del'" size="small"type="text"
                       @click="delNotice(scope.$index, scope.row)"><i class="el-icon-delete"/>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       :page-sizes="[5, 10, 20, 50]"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       :current-page="currentPage" :page-size="pageSize"
                       :total="totals" style="float:right; margin-right: 40px;"  >
        </el-pagination>
      </el-col>
      <!--新增对话框-->
      <el-dialog :visible.sync="saveFormVisible" :close-on-click-modal="false">
        <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="100px">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="saveForm.title" maxlength="20" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="statue">
            <el-radio v-model="saveForm.state" label="1">开启</el-radio>
            <el-radio v-model="saveForm.state" label="0">禁用</el-radio>
          </el-form-item>
          <el-form-item label="公告内容" prop="noticeText">
            <el-input type="textarea" v-model="saveForm.noticeText"  maxlength="500"
                      show-word-limit></el-input>
            <div class="notice-tip">为了公告置顶滚动效果，公告内容尽量在100字以上,建议150左右。</div>
          </el-form-item>
          <el-form-item>
            <el-button @click.native="saveFormVisible = false">取消</el-button>
            <el-button type="primary" :loading="saveLoading" @click="saveSubmit('ruleForm')">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--编辑对话框-->
      <el-dialog :visible.sync="editFormVisible" :close-on-click-modal="false">
        <!--ref="saveForm" 指定表单名称，以后可以通过this.$refs.roleForm-->
        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="statue">
            <el-radio-group v-model="editForm.state">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公告内容" prop="noticeText">
            <el-input type="textarea" v-model="editForm.noticeText"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" :loading="editLoading" @click="edtSubmit('editForm')">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--详情对话框-->
      <el-dialog :visible.sync="showFormVisible" :close-on-click-modal="false"  width="50%">
        <el-descriptions title="公告详情" :column="2" border>
          <el-descriptions-item label="创建人"  :labelStyle='labelstyle' >{{ showForm.employee.adminName }}</el-descriptions-item>
          <el-descriptions-item label="公告标题" :labelStyle='labelstyle'>{{ showForm.title }}</el-descriptions-item>
          <el-descriptions-item label="公告状态":labelStyle='labelstyle' ><el-tag size="small">{{ showForm.state === 1 ? '开启' : '关闭'  }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="创建时间" :labelStyle='labelstyle'>{{ showForm.createTime }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions border :column="1">
          <el-descriptions-item class="custom-item-text" label="公告内容" :contentStyle="{'text-align': 'left'}" :labelStyle='labelstyle'>{{ showForm.noticeText }}</el-descriptions-item>
        </el-descriptions>

      </el-dialog>

    </div>

  </div>

</template>

<script>


export default {

  data() {
    return {
      //label样式
      labelstyle:{
        'width':'120px',
        'textAlign': 'center',
      },
      listLoading: false,

      totals: '',
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 20, 50], // 可选择的每页条数
      keyword: '',
      //搜索规则
      ruleSelectForm: {
        title: '',
        creator: '',
        state: '',
      },
      //填写规则
      rules: {
        title: [
          {required: true, message: '请输入公告标题', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        noticeText: [
          {required: true, message: '请填写公告内容', trigger: 'blur'}
        ]
      },

      saveForm: {
        title: '',
        creator: '',
        state: false,
        noticeText: ''
      },
      editForm: {
        id: null,
        title: '',
        creator: '',
        state: false,
        noticeText: '',
        top: ''
      },
      showForm:{
        title:'',
        state:'',
        top:'',
        noticeText:'',
        createTime:'',
      employee:{
      adminName:'',
}
      },
      showFormVisible:false,

      saveFormVisible: false,
      saveLoading: false, //加载框

      editFormVisible: false,
      editLoading: false, //加载框
      //分页显示所属数据
      noticeMags: [],
      //置顶列表
      moveUpList: [
        {
          id: '',
          title: '',
          noticeText: '',
        }
      ]
    }

  },

  methods: {
    //1
    keywordQuery() {
      //查询完，原来分页条件已经没用了，要跑到第一页去

      this.currentPage = 1;
      this.getFindNoticeMag();
    },

    //2新增公告
    addNotice: function () {
      //置空数据，防止先点修改，后点添加有值
      this.saveForm = {
        id: null,
        title: '',
        creator: '',
        state: '',
        noticeText: ''
      };
      //显示对话框
      this.saveFormVisible = true;
    },

    //3提交公告
    saveSubmit() {
      this.$refs.saveForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.saveLoading = true;
            //获取登陆人信息
            const logininfo = JSON.parse(localStorage.getItem("logininfo"));
            //获取当前登陆人的名字
            const logininfoId = logininfo.id;
            this.saveForm.creator = logininfoId;
            let para = Object.assign({}, this.saveForm);
            this.$http.put("/notice/addNotice", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['saveForm'].resetFields();
                this.getFindNoticeMag();
              } else {
                this.$message.error("系统繁忙，请稍后重试!!!【500】");
              }
              this.saveLoading = false;
              this.saveFormVisible = false;
              // this.findTaskMag();
            });
          });
        }
      });
    },
    //4获取公告列表
    getFindNoticeMag() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ruleSelectForm: this.ruleSelectForm
      };
      this.$http.post("/notice/findAllNoticeInfo", para).then(res => {
        this.totals = res.data.total;
        this.noticeMags = res.data.records;
        this.currentPage = para.currentPage; // 更新当前页数
        this.listLoading = false;
      }).catch(result => {
        this.$message.error("系统繁忙，请稍后重试!!!")
      })
    },

    //5显示修改公告页面
    handleEdit(index, row) {
      this.editForm = Object.assign({}, row);
      this.editFormVisible = true;
    },
    //公告详情展示
    showNotice(index, row) {
      this.showForm = Object.assign(row);
      this.showFormVisible = true;
    },
    //6修改公告
    edtSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            let para = Object.assign({}, this.editForm);
            this.$http.put("/notice/upd", para).then(res => {
              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['editForm'].resetFields();
              } else {
                this.$message.warning("系统繁忙，请稍后重试!!!");
              }
              this.editLoading = false;
              this.editFormVisible = false;
              this.getFindNoticeMag();
            });
          });
        }
      });
    },

    //7删除公告
    delNotice(index, row) {
      this.$confirm('确认删除该公告吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/notice/del/" + row.id).then(res => {
          if (res.data.success) {
            //计算总页数
            let totalPage = Math.ceil(this.total / this.pageSize);
            // 当删除最后一页的最后一条数据，并且当前不是第一页，就让当前页-1
            if (this.currentPage == totalPage && (this.total - 1) % this.pageSize == 0 && this.currentPage != 1) {
              this.currentPage = this.currentPage - 1;
            }
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getFindNoticeMag();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });
    },
    // 点击分页实现
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getFindNoticeMag();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置当前页码为1
      this.getFindNoticeMag();
    },
    //公告置顶
    handleTopChange(index, row) {
      this.$confirm('请确认公告置顶前是否有已经置顶的公告, 如果有请先取消置顶公告! 否则会直接覆盖!', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.put("/notice/createTop/"+row.id).then(res => {
          if (res.data.success) {
            this.$message({
              message: '公告置顶成功',
              type: 'success'
            });
            this.getFindNoticeMag();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });
    },
    //取消置顶
    handleUnTop(index, row) {
      this.$confirm('确认将该公告取消置顶滚动吗,取消置顶后,其他客户端不会立即刷新!', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.put("/notice/downTop/"+row.id).then(res => {
          if (res.data.success) {
            this.$message({
              message: '取消置顶成功,请重新置顶新公告!',
              type: 'success'
            });
            this.getFindNoticeMag();
          } else {
            this.$message.error("系统繁忙，请稍后重试!!!【500】");
          }
          this.listLoading = false;
        }).catch(res => {
          this.$message.error("系统繁忙，请稍后重试!!!【400,404】");
        })
      }).catch(() => {
      });
    },
  },
  mounted() {
    this.getFindNoticeMag();
  },
}

</script>

<style scoped>
.notice-tip {
  margin-top: 5px;
  color: #999;
  font-size: 12px;
}
.custom-item{
  width: 33% !important; /* 每行3列，设置每列宽度 */
  height: 20px !important; /* 设置每行高度 */
}
.custom-item-text{
  width: 33% !important; /* 每行3列，设置每列宽度 */
  height: 20px !important; /* 设置每行高度 */
}
.gongJv {
  margin-top: 20px;
}
</style>